<template>
    <div class="homeTop">
        <div class="homeUserTop">
            <span class="homeHeadIcon"><img :src="userMsg.user.image" alt=""></span>
            <p class="homeUserMsg">
                <span style="font-size:20px">{{userMsg.user.name}}</span>
                <span style="font-size:13px">{{userMsg.user.phone}}</span>
            </p>
            <span class="homeCode" @click="codePopover"><img src="@/images/neitui/code.png" alt=""><span>二维码</span></span>
            <div style="display:block;overflow:hidden;vertical-align:text-bottom;border-bottom:1px solid #ffffff">
                <span style="vertical-align:text-bottom;display:inline-block;margin-top: 31px">本月数据统计</span>
                <span style="font-size:15px;float:right;vertical-align:bottom">客户数量<span style="font-size:40px;margin-left:15px;">{{userMsg.sum}}</span></span>
            </div>
        </div>
        <ul class="homePaiming">
            <li v-if="userMsg.Rankings.achievement.number">
                <span class="paiMingNum">{{Number(userMsg.Rankings.achievement.number).toFixed(2)}}</span>
                <span>业绩提成(元)</span>
                <span class="paiMingNumber">第{{userMsg.Rankings.achievement.ranking}}名</span>
            </li>
            <li v-else>
                <span class="paiMingNum">0.00</span>
                <span>业绩提成(元)</span>
                <span class="paiMingNumber">暂无排名</span>
            </li>
            <li v-if="userMsg.Rankings.effectiveuser.number">
                <span class="paiMingNum">{{userMsg.Rankings.effectiveuser.number}}</span>
                <span>有效用户(人)</span>
                <span class="paiMingNumber">第{{userMsg.Rankings.effectiveuser.ranking}}名</span>
            </li>
            <li v-else>
                <span class="paiMingNum">0</span>
                <span>有效用户(人)</span>
                <span class="paiMingNumber">暂无排名</span>
            </li>
            <li v-if="userMsg.Rankings.user.number">
                <span class="paiMingNum">{{userMsg.Rankings.user.number}}</span>
                <span>注册用户(人)</span>
                <span class="paiMingNumber">第{{userMsg.Rankings.user.ranking}}名</span>
            </li>
            <li v-else>
                <span class="paiMingNum">0</span>
                <span>注册用户(人)</span>
                <span class="paiMingNumber">暂无排名</span>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        name: "homeTop",
        components:{
            
        },
        data() {
            return {
                
            };
        },
        props:['userMsg'],
        methods:{
            codePopover:function(){
                this.$emit('isPopover',true)
            }
        },
        created(){
        
        },
        mounted(){
        
        }
    }
</script>

<style scoped lang="scss">
    .homeTop{
        .homeUserTop{
            width: 92vw;
            margin: 0 auto;
            padding: 15px 0
        }
        color: #ffffff;
        background: #55A9FF;
        .homeHeadIcon{
            width: 70px;
            height:70px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img{
                width:100%
            }
        }
        .homeUserMsg{
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
            span{
                display: block;
            }
        }
        .homeCode{
            // vertical-align: middle;
            float:right;
            margin-top:13px;
            text-align: center;
            img{
                vertical-align: middle;
                width:22px;
            }
            span{
                display: block;
                margin-top:5px;
                font-size: 13px;
            }
        }
        .homePaiming{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-bottom: 15px;
            li{
                width:30%;
                text-align: center;
                span{
                    display: block;
                }
                .paiMingNum{
                    font-size: 28px;
                    color:#FFF369
                }
                .paiMingNumber{
                    font-size:12px;
                    color: #333333;
                }

            }
        }
    }
    
</style>
